<template>
  <page-header-wrapper>
    <a-card>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="4">
                <a-form-item label="">
                  <a-input placeholder="兑换码" v-model="searchData.redeemCode"/>
                </a-form-item>
              </a-col>
              <a-col :md="4">
                <a-form-item label="">
                  <a-select v-model="searchData.redeemStatus" placeholder="兑换状态" default-value="">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option value="1">待兑换</a-select-option>
                    <a-select-option value="2">已兑换</a-select-option>
                    <a-select-option value="3">已取消</a-select-option>
                    <a-select-option value="4">已删除</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :sm="6">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" icon="search" @click="searchFunc(true)">查询</a-button>
                  <a-button style="margin-left: 8px" icon="reload" @click="() => this.searchData = {}">重置</a-button>
                </span>
              </a-col>
              <!-- <a-col :sm="10">
                <p class="redTip">手续费：0.00</p>
              </a-col> -->
            </a-row>
          </a-form>
        </div>
        
        <!-- 列表渲染 -->
        <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="searchData"
        >
          <template slot="redeemStatus" slot-scope="{record}">
            <p v-if="record.redeemStatus==1">待兑换</p>
            <p v-else-if="record.redeemStatus==2">已兑换</p>
            <p v-else-if="record.redeemStatus==3">已取消</p>
            <p v-else-if="record.redeemStatus==4">已删除</p>
            <p v-else>--</p>
          </template>
          <template slot="black">
            <p>否</p>
          </template>
          <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
            <JeepayTableColumns v-if="record.redeemStatus==1">
              <a-button type="link" @click="invalid(record)">作废</a-button>
            </JeepayTableColumns>
          </template>
        </JeepayTable>
      </a-card>
   </page-header-wrapper>
</template>

<script>
import JeepayCard from '@/components/JeepayCard/JeepayCard'
import JeepayTable from '@/components/JeepayTable/JeepayTable'
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_URL_PACKET_ORDER_LIST, req, invalid } from '@/api/manage'
const tableColumns = [
    { key: 'activeName', title: '红包名称', dataIndex: 'activeName' },
    { key: 'redeemCode', title: '兑换码', dataIndex: 'redeemCode' },
    { key: 'userName', title: '兑换用户', dataIndex: 'userName' },
    { key: 'redeemStatus', title: '兑换状态', scopedSlots: { customRender: 'redeemStatus' } },
    { key: 'createdAt', title: '兑换时间', dataIndex: 'createdAt' },
    { key: 'black', title: '是否黑名单', scopedSlots: { customRender: 'black' } },
    { key: 'ip', title: 'IP', dataIndex: 'ip' },
    { key: 'sh', title: '审核', dataIndex: 'sh' },
    { key: 'tx', title: '头像', dataIndex: 'tx' },
    { key: 'op', title: '操作', width: '200px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
]
export default {
    components: {
        JeepayCard,
        JeepayTable,
        JeepayTableColumns,
    },
    data () {
        return {
            tableColumns: tableColumns,
            searchData: {},
        }
    },
    created(){
      this.searchData.batchNo = this.$route.query.batchNo;
    },
    methods: {
      // 请求table接口数据
      reqTableDataFunc: (params) => {
        return req.list(API_URL_PACKET_ORDER_LIST, params)
      },
      searchFunc: function () { // 点击【查询】按钮点击事件
        this.$refs.infoTable.refTable(true)
      },
      invalid(item){
        invalid(item.id).then(res => {
          this.$message.success('操作成功');
          this.searchFunc();
        })
      }
    }
}
</script>

<style lang="less" scoped>
.redTip{
    color:red;
    line-height:30px;
    text-align:right;
    font-size:16px;
}
  .jeepay-card-content {
    width: 100%;
    position: relative;
    background-color: @jee-card-back;
    border-radius: 6px;
    overflow:hidden;
  }
  .jeepay-card-ops {
    width: 100%;
    height: 50px;
    background-color: @jee-card-back;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid @jee-back;
    position: absolute;
    bottom: 0;
  }
  .jeepay-card-content-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .jeepay-card-content-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .title {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 1px;
  }
</style>
